<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/resource/css/main.css" />
    <style type="text/css">
        td {
            border: solid grey 1px;
        }

        .thumbnail{
            height: 64px;
            width: 64px;
            margin: 10px 5px;
        }

        .txtCreate{
            width: 380px;
        }

        #tblView tr{
            width: 478px;

        }

        #tblCreate tr{
            width: 476px;
        }

    </style>

    <script type="text/javascript" src="/resource/script/jquery.js"></script>
    <script type="text/javascript" src="/resource/script/jquery.watermark.js"></script>
    <script type="text/javascript" src="/resource/script/qiniu.min.js"></script>
    <script type="text/javascript" src="/resource/script/plupload/plupload.full.min.js"></script>
    <script type="text/javascript" src="/resource/script/plupload/i18n/zh_CN.js"></script>


    <script type="text/javascript" src="/resource/script/plupload/bootstrap.min.js"></script>
    <script type="text/javascript" src="/resource/script/plupload/ui.js"></script>
    <script type="text/javascript">
        var isCreate = false;
        $(document).ready(function(){
            var selMaster = $("#selMaster");
            var selSalve = $("#selSalve");

            selMaster.change(function () {
                if($(this).val() > 0){
                    $.post("/shop/name/list",
                        {
                            shopId:$(this).val()
                        },
                        function(data, status){
                            if(status == "success"){
                                if (data.result){
                                    selSalve.removeAttr("disabled");
                                    selSalve.html("<option value ='0'> -- 未选择 -- </option>" + data.nameList);
                                }
                                else {
                                    alert(data.errorMsg);
                                }
                            }
                            else {
                                alert("网络请求出错，请重新再试！");
                            }
                        }
                    );
                }
                else {
                    selSalve.attr("disabled", "disabled");
                    selSalve.html("<option value ='0'> -- 未选择 -- </option>");
                }
            });

            $("#btnSelect").click(function(){
                var msId = selMaster.val();
                if (msId == "0"){
                    alert("请选择品牌!");
                }
                else {
                    $("#trTitle").nextAll().each(function(){
                        $(this).remove();
                    });
                    $.post("/shop/list",
                        {
                            masterShopId:msId,
                            salveShopId:selSalve.val()
                        },
                        function(data, status){
                            if(status == "success"){
                                if (data.result){
                                    $("#trTitle").after(data.shopData);
                                }
                                else {
                                    alert(data.errorMsg);
                                }
                            }
                            else {
                                alert("网络请求出错，请重新再试！");
                            }
                        }
                    );
                }
            });

            $("#btnAdd").click(function(){
                isCreate = true;

                showCreateOrUpdate();
            });

            $("#btnCreateClose").click(function(){
                $("#divCover").fadeOut();
                $("#divShopCreate").fadeOut();
                cleanShopCreateData();
            });

            $("#btnViewClose").click(function(){
                $("#divCover").fadeOut();
                $("#divShopView").fadeOut();
            });

            $("#btnDeleteAllImg").click(function(){
                $("#imgHolder").nextAll().each(function(){
                    $(this).remove();
                });
            });

            $("#btnCreateSubmit").click(function(){
                if (isCreate){
                    var shopImgList = "";
                    $("#imgHolder").nextAll().each(function(){
                        shopImgList += $(this).attr("src") + ";";
                    });
                    $.post("/shop/add",
                        {
                            masterId:$("#selCMaster").val(),
                            masterName:$("#txtMasterName").val(),
                            slaveName:$("#txtSlaveName").val(),
                            desc:$("#txtDesc").val(),
                            shopType:$("#selType").val(),
                            selStar:$("#selStar").val(),
                            cityId:$("#selCity").val(),
                            districtId:$("#selDistrict").val(),
                            circleId:$("#selCircle").val(),
                            shopIcon:$("#imgcHeader").attr("src"),
                            shopImgs:shopImgList,
                            address:$("#txtAddress").val(),
                            lo:$("#txtLo").val(),
                            la:$("#txtLa").val(),
                            phone:$("#txtPhone").val(),
                            pwd:$("#txtPwd").val()
                        },
                        function(data, status){
                            if(status == "success"){
                                if (data.result){
                                    alert("添加门店成功！");
                                    $("#btnCreateClose").click();
                                    if(data.reflush){
                                        location.reload();
                                    }
                                }
                                else {
                                    alert(data.errorMsg);
                                    $("#divCover").fadeOut();
                                }
                            }
                            else {
                                alert("网络请求出错，请重新再试！");
                                $("#divCover").fadeOut();
                            }
                        }
                    );
                }
                else {
                    var shopImgList = "";
                    $("#imgHolder").nextAll().each(function(){
                        shopImgList += $(this).attr("src") + ";";
                    });
                    $.post("/shop/update",
                        {
                            shopId:$("#hidShopId").val(),
                            masterId:$("#selCMaster").val(),
                            slaveName:$("#txtSlaveName").val(),
                            desc:$("#txtDesc").val(),
                            shopType:$("#selType").val(),
                            selStar:$("#selStar").val(),
                            cityId:$("#selCity").val(),
                            districtId:$("#selDistrict").val(),
                            circleId:$("#selCircle").val(),
                            shopIcon:$("#imgcHeader").attr("src"),
                            shopImgs:shopImgList,
                            address:$("#txtAddress").val(),
                            lo:$("#txtLo").val(),
                            la:$("#txtLa").val()
                        },
                        function(data, status){
                            if(status == "success"){
                                if (data.result){
                                    alert("更新门店成功！");
                                    $("#btnCreateClose").click();

                                    if(isCreate && data.reflush){
                                        location.reload();
                                    }
                                }
                                else {
                                    alert(data.errorMsg);
                                    $("#divCover").fadeOut();
                                }
                            }
                            else {
                                alert("网络请求出错，请重新再试！");
                                $("#divCover").fadeOut();
                            }
                        }
                    );
                }

            });
        });

        function cleanShopCreateData(){
            $("#selCMaster").val("0");
            $("#txtMasterName").val("");
            $("#txtSlaveName").val("");
            $("#txtDesc").val("");
            $("#selStar").val("10");
            $("#selDistrict").val("1");
            $("#imgcHeader").attr("src","/resource/img/shop_temp.png");
            $("#imgHolder").nextAll().each(function(){
                $(this).remove();
            });
            $("#selCircle").val("1");
            $("#txtAddress").val("");
            $("#txtLo").val("");
            $("#txtLa").val("");
            $("#txtPhone").val("");
            $("#txtPwd").val("");

        }

        function shopUpdate(shopIdStr){
            isCreate = false;
            $("#hidShopId").val(shopIdStr);

            $.post("/shop/detail",
                {
                    shopId:shopIdStr
                },
                function(data, status){
                    if(status == "success"){
                        if (data.result){
                            showCreateOrUpdate();
                            $("#selCMaster").val(data.masterId);
                            $("#txtSlaveName").val(data.slaveShopName);
                            $("#txtDesc").val(data.description);
                            $("#selType").val(1);
                            $("#selStar").val(data.honor*2);
                            $("#selCity").val(data.cityId);
                            $("#selDistrict").val(data.districtId);
                            $("#selCircle").val(data.circleId);

                            $("#imgcHeader").attr("src", data.shopIconUrl);
                            if("" != data.shopImgUrl8){
                                var imgDomHtml ="<img class='thumbnail' src='" + data.shopImgUrl8 + "' onclick='setIcon(\"" + data.shopImgUrl8 + "\")' />";
                                $("#imgHolder").after(imgDomHtml);
                            }

                            if("" != data.shopImgUrl7){
                                var imgDomHtml ="<img class='thumbnail' src='" + data.shopImgUrl7 + "' onclick='setIcon(\"" + data.shopImgUrl7 + "\")' />";
                                $("#imgHolder").after(imgDomHtml);
                            }

                            if("" != data.shopImgUrl6){
                                var imgDomHtml ="<img class='thumbnail' src='" + data.shopImgUrl6 + "' onclick='setIcon(\"" + data.shopImgUrl6 + "\")' />";
                                $("#imgHolder").after(imgDomHtml);
                            }

                            if("" != data.shopImgUrl5){
                                var imgDomHtml ="<img class='thumbnail' src='" + data.shopImgUrl5 + "' onclick='setIcon(\"" + data.shopImgUrl5 + "\")' />";
                                $("#imgHolder").after(imgDomHtml);
                            }

                            if("" != data.shopImgUrl4){
                                var imgDomHtml ="<img class='thumbnail' src='" + data.shopImgUrl4 + "' onclick='setIcon(\"" + data.shopImgUrl4 + "\")' />";
                                $("#imgHolder").after(imgDomHtml);
                            }

                            if("" != data.shopImgUrl3){
                                var imgDomHtml ="<img class='thumbnail' src='" + data.shopImgUrl3 + "' onclick='setIcon(\"" + data.shopImgUrl3 + "\")' />";
                                $("#imgHolder").after(imgDomHtml);
                            }

                            if("" != data.shopImgUrl2){
                                var imgDomHtml ="<img class='thumbnail' src='" + data.shopImgUrl2 + "' onclick='setIcon(\"" + data.shopImgUrl2 + "\")' />";
                                $("#imgHolder").after(imgDomHtml);
                            }

                            if("" != data.shopImgUrl1){
                                var imgDomHtml ="<img class='thumbnail' src='" + data.shopImgUrl1 + "' onclick='setIcon(\"" + data.shopImgUrl1 + "\")' />";
                                $("#imgHolder").after(imgDomHtml);
                            }

                            $("#txtAddress").val(data.address);
                            $("#txtLo").val(data.longitude);
                            $("#txtLa").val(data.latitude);
                            $("#txtPhone").val(data.registerPhone);
                        }
                        else {
                            alert(data.errorMsg);
                            $("#divCover").fadeOut();
                        }
                    }
                    else {
                        alert("网络请求出错，请重新再试！");
                        $("#divCover").fadeOut();
                    }
                }
            );
        }

        function showCreateOrUpdate(){
            if(isCreate){
                $("#txtMasterName").show();
                $("#trPhone").show();
                $("#trPwd").show();
            }
            else {
                $("#txtMasterName").hide();
                $("#trPhone").hide();
                $("#trPwd").hide();
            }

            $("#divCover").fadeIn();
            $("#divShopCreate").fadeIn();
        }

        function shopView(shopIdStr){
            $("#divCover").fadeIn();
            $.post("/shop/detail",
                {
                    shopId:shopIdStr
                },
                function(data, status){
                    if(status == "success"){
                        if (data.result){
                            $("#divShopView").fadeIn();
                            $("#spMasterName").text(data.masterShopName);
                            $("#spSlaveName").text(data.slaveShopName);
                            $("#spHonor").text(data.honor);
                            $("#spDesc").text(data.description);
                            $("#imgHeader").attr("src", data.shopIconUrl);
                            if("" == data.shopImgUrl1){
                                $("#imgShopUrl1").hide();
                            }
                            else {
                                $("#imgShopUrl1").attr("src", data.shopImgUrl1);
                                $("#imgShopUrl1").show();
                            }

                            if("" == data.shopImgUrl2){
                                $("#imgShopUrl2").hide();
                            }
                            else {
                                $("#imgShopUrl2").attr("src", data.shopImgUrl2);
                                $("#imgShopUrl2").show();
                            }

                            if("" == data.shopImgUrl3){
                                $("#imgShopUrl3").hide();
                            }
                            else {
                                $("#imgShopUrl3").attr("src", data.shopImgUrl3);
                                $("#imgShopUrl3").show();
                            }

                            if("" == data.shopImgUrl4){
                                $("#imgShopUrl4").hide();
                            }
                            else {
                                $("#imgShopUrl4").attr("src", data.shopImgUrl4);
                                $("#imgShopUrl4").show();
                            }

                            if("" == data.shopImgUrl5){
                                $("#imgShopUrl5").hide();
                            }
                            else {
                                $("#imgShopUrl5").attr("src", data.shopImgUrl5);
                                $("#imgShopUrl5").show();
                            }

                            if("" == data.shopImgUrl6){
                                $("#imgShopUrl6").hide();
                            }
                            else {
                                $("#imgShopUrl6").attr("src", data.shopImgUrl6);
                                $("#imgShopUrl6").show();
                            }

                            if("" == data.shopImgUrl7){
                                $("#imgShopUrl7").hide();
                            }
                            else {
                                $("#imgShopUrl7").attr("src", data.shopImgUrl7);
                                $("#imgShopUrl7").show();
                            }

                            if("" == data.shopImgUrl8){
                                $("#imgShopUrl8").hide();
                            }
                            else {
                                $("#imgShopUrl8").attr("src", data.shopImgUrl8);
                                $("#imgShopUrl8").show();
                            }

                            $("#spAddress").text(data.address);
                            $("#spLocation").text("[" + data.longitude + "," + data.latitude + "]");
                            $("#spPhone").text(data.registerPhone);
                        }
                        else {
                            alert(data.errorMsg);
                            $("#divCover").fadeOut();
                        }
                    }
                    else {
                        alert("网络请求出错，请重新再试！");
                        $("#divCover").fadeOut();
                    }
                }
            );
        }

        function shopStatus(shopIdStr, isForbid){
            $.post("/shop/status",
                {
                    shopId:shopIdStr,
                    forbid:isForbid
                },
                function(data, status){
                    if(status == "success"){
                        if (data.result){
                            var btnId1 = "#btnOp1-" + shopIdStr;
                            var btnId2 = "#btnOp2-" + shopIdStr;

                            var btnOp1 = $(btnId1);
                            var btnOp2 = $(btnId2);

                            if (isForbid){
                                alert("禁用门店成功！");
                                btnOp1.hide();
                                btnOp2.show();
                            }
                            else {
                                alert("启用门店成功！");
                                btnOp1.show();
                                btnOp2.hide();
                            }
                        }
                        else {
                            alert(data.errorMsg);
                        }
                    }
                    else {
                        alert("网络请求出错，请重新再试！");
                    }
                }
            );
        }

        function shopReset(shopIdStr){
            $.post("/shop/reset",
                {
                    shopId:shopIdStr
                },
                function(data, status){
                    if(status == "success"){
                        if (data.result){
                            alert("重置密码成功！");
                        }
                        else {
                            alert(data.errorMsg);
                        }
                    }
                    else {
                        alert("网络请求出错，请重新再试！");
                    }
                }
            );
        }

        function setIcon(iconUrl){
            $("#imgcHeader").attr("src", iconUrl);
        }
    </script>
</head>
<body>
<div style="margin: 20px;">
    选择品牌：
    <select id="selMaster">
        <option value ="0"> -- 未选择 -- </option>
        <c:forEach items="${masterShopNameList}" var="nameItem">
            <option value ='<c:out value="${nameItem.id}" />'><c:out value="${nameItem.name}" /></option>
        </c:forEach>
    </select>

    选择分店：
    <select id="selSalve" disabled="disabled">
        <option value ="0"> -- 未选择 -- </option>
    </select>

    <input id="btnSelect" type="button" value="查询" />

    <input id="btnAdd" type="button" value="添加门店" style="position: absolute; left: 750px;" />
</div>
<div>
    <table id="tShopList" style=" border: solid grey 1px; margin-top: 30px;">
        <tr id="trTitle">
            <td width="80px">序号</td>
            <td width="120px">品牌</td>
            <td width="120px">分店</td>
            <td width="120px">门店星级</td>
            <td width="120px">状态</td>
            <td width="240px">操作</td>
        </tr>
    </table>
</div>

<div id="divCover" class="divMask" style="display: none; height: 750px;"></div>
<div id="divShopView" style="position: absolute; width: 480px; height: 480px; left: 50%; margin-left: -240px; top: 10px; background-color: #FFFFFF; z-index: 10; display: none;">
    <table id="tblView" style="width: 100%; margin-top: 10px; height: 420px;">
        <tr><td> 门店品牌：<span id="spMasterName"></span> </td></tr>
        <tr><td> 分店名称：<span id="spSlaveName"></span> </td></tr>
        <tr><td> 星级：<span id="spHonor"></span> </td></tr>
        <tr><td> 分店描述：<span id="spDesc"></span> </td></tr>
        <tr><td> 门店头像：<img id="imgHeader" class="thumbnail" /> </td></tr>
        <tr>
            <td> 门店详情：
                <span>
                    <img id="imgShopUrl1" class="thumbnail" />
                    <img id="imgShopUrl2" class="thumbnail" />
                    <img id="imgShopUrl3" class="thumbnail" />
                    <img id="imgShopUrl4" class="thumbnail" />
                    <img id="imgShopUrl5" class="thumbnail" />
                    <img id="imgShopUrl6" class="thumbnail" />
                    <img id="imgShopUrl7" class="thumbnail" />
                    <img id="imgShopUrl8" class="thumbnail" />
                </span>
            </td>
        </tr>
        <tr><td> 门店地址：<span id="spAddress"></span> </td></tr>
        <tr><td> 门店经纬度：<span id="spLocation"></span> </td></tr>
        <tr><td> 门店电话：<span id="spPhone"></span> </td></tr>
    </table>
    <input id="btnViewClose" type="button" value="关 闭" style="position: absolute; bottom: 10px; width: 60px; right: 20px;">
</div>

<div id="divShopCreate" style="position: absolute; width: 490px; height: 700px; left: 50%; margin-left: -245px; top: 10px; background-color: #FFFFFF; z-index: 10; display: none;">
    <table id="tblCreate" style="width: 476px; margin-top: 10px; height: 650px;">
        <tr>
            <td>
                门店品牌：
                <select id="selCMaster">
                    <option value ="0"> -- 未选择 -- </option>
                    <c:forEach items="${masterShopNameList}" var="nameItem">
                        <option value ='<c:out value="${nameItem.id}" />'><c:out value="${nameItem.name}" /></option>
                    </c:forEach>
                </select>
                <input type="text" class="txtCreate" style="width: 150px;" id="txtMasterName" />
                <input id="hidShopId" type="hidden" value="" />
            </td>
        </tr>
        <tr><td> 分店名称：<input type="text" class="txtCreate" id="txtSlaveName" /> </td></tr>
        <tr><td> 门店描述：<input type="text" class="txtCreate" id="txtDesc" /> </td></tr>
        <tr>
            <td>
                门店类型：
                    <select id="selType">
                        <option value ="1"> 美发店 </option>
                    </select>
                星级：
                <select id="selStar">
                    <option value ="10"> 5星 </option>
                    <option value ="8"> 4星 </option>
                    <option value ="6"> 3星 </option>
                    <option value ="4"> 2星 </option>
                    <option value ="2"> 1星 </option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                所在城市：
                <select id="selCity">
                    <option value ="10">北京</option>
                </select>
                行政区：
                <select id="selDistrict">
                    <option value ="1">朝阳</option>
                    <option value ="2">海淀</option>
                    <option value ="3">西城</option>
                    <option value ="4">东城</option>
                    <option value ="5">崇文</option>
                    <option value ="6">宣武</option>
                    <option value ="7">丰台</option>
                    <option value ="8">石景山</option>
                    <option value ="9">顺义</option>
                    <option value ="10">昌平</option>
                </select>
                商圈：
                <select id="selCircle">
                    <option value ="1">CBD</option>
                    <option value ="2">西直门</option>
                    <option value ="3">安定门</option>
                    <option value ="4">崇文门</option>
                    <option value ="5">三里屯</option>
                    <option value ="6">五道口</option>
                    <option value ="7">五棵松</option>
                    <option value ="8">朝外大街</option>
                    <option value ="9">亚运村</option>
                    <option value ="10">王府井</option>
                    <option value ="11">望京</option>
                    <option value ="12">亮马桥</option>
                    <option value ="13">中关村</option>
                    <option value ="14">西单/金融街</option>
                    <option value ="15">其他</option>
                </select>
            </td>
        </tr>
        <tr style="height: 80px;"><td style="height: 80px;"> 门店头像：<img id="imgcHeader" class="thumbnail" src="/resource/img/shop_temp.png" /> </td></tr>
        <tr style="height: 220px;">
            <td style="height: 220px;"> 门店效果图：
                <div id="spanImgList" style="width: 480px; height: 180px;">
                    <img id="imgHolder" style="display: none;" src="/resource/img/shop_temp.png" />
                </div>
                <div id="container" style="left:5px;">
                    <a class="btn btn-default btn-lg " id="pickfiles" href="#" >
                        <i class="glyphicon glyphicon-plus"></i>
                        <span>上传图片</span>
                    </a>
                </div>
                <input id="btnDeleteAllImg" type="button" style="right:85px;" value="删除所有图片" />
            </td>
        </tr>
        <tr><td> 门店地址：<input type="text" class="txtCreate" id="txtAddress" /> </td></tr>
        <tr>
            <td>
                经度：<input type="text" style="width: 160px;" class="txtCreate" id="txtLo" />
                纬度：<input type="text" style="width: 160px;" class="txtCreate" id="txtLa" />
            </td>
        </tr>
        <tr id="trPhone"><td> 门店电话：<input type="text" class="txtCreate" id="txtPhone" /> </td></tr>
        <tr id="trPwd"><td> 登陆密码：<input type="text" class="txtCreate" id="txtPwd" /> </td></tr>
    </table>
    <input id="btnCreateSubmit" type="button" value="提 交" style="position: absolute; bottom: 10px; width: 60px; left: 80px;" />
    <input id="btnCreateClose" type="button" value="取 消" style="position: absolute; bottom: 10px; width: 60px; right: 80px;" />
</div>

</body>

<script type="text/javascript">
    var uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4',    //上传模式,依次退化
        browse_button: 'pickfiles',       //上传选择的点选按钮，**必需**
        //uptoken_url: '/system/token',            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
        uptoken : '${uploadToken}', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
        // unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
        // save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
        domain: 'http://7xk0p1.com2.z0.glb.qiniucdn.com/',   //bucket 域名，下载资源时用到，**必需**
        container: 'container',           //上传区域DOM ID，默认是browser_button的父元素，
        max_file_size: '4mb',           //最大文件体积限制
        flash_swf_url: '/resource/script/plupload/Moxie.swf',  //引入flash,相对路径
        max_retries: 3,                   //上传失败最大重试次数
        dragdrop: true,                   //开启可拖曳上传
        drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
        chunk_size: '1mb',                //分块上传时，每片的体积
        auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
        init: {
            'FilesAdded': function(up, files) {
                plupload.each(files, function(file) {
                    // 文件添加进队列后,处理相关的事情
                });
            },
            'BeforeUpload': function(up, file) {
                // 每个文件上传前,处理相关的事情
            },
            'UploadProgress': function(up, file) {
                // 每个文件上传时,处理相关的事情
            },
            'FileUploaded': function(up, file, info) {
                var jsonData=JSON.parse(info);
                var imgUrl = up.getOption('domain') + jsonData.key;
                var imgDomHtml ="<img class='thumbnail' src='" + imgUrl + "' onclick='setIcon(\"" + imgUrl + "\")' />";
                $("#imgHolder").after(imgDomHtml);
            },
            'Error': function(up, err, errTip) {
                //上传出错时,处理相关的事情
            },
            'UploadComplete': function() {
                //队列文件处理完毕后,处理相关的事情
            },
            'Key': function(up, file) {
                var key = "shop-" + new Date().getTime();
                return key
            }
        }
    });
</script>

</html>